<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<link type="text/css" href="css/index.css" rel="stylesheet" />

	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>

	<body>

		<div class="imageShow" id="father">

			<a href="javascript:void(0)" id="imageShow">图片预览</a>

			<a href="javascript:void(0)">

				<a href="javascript:void(0)"><img src="img/1514140552N.jpg" title="图片预览" class="picShow" /></a>
				<a href="javascript:void(0)"><img src="img/20071229164759914_2.jpg" title="图片预览" class="picShow" /></a>
				<a href="javascript:void(0)"><img src="img/2029588_133948037836_2.jpg" title="图片预览" class="picShow" /></a>
				<a href="javascript:void(0)"><img src="img/219049-1210031JQ969.jpg" title="图片预览" class="picShow" /></a>

		</div>

		<!--
        	图片预览样式
        -->
		<div id="imagePreview" class="_imagePreview-div">

			<!--左手-->
			<div id="left" class="_left-div">
				<span class="hand"></span>
			</div>

			<!--图片展示-->
			<img src="" data-index="" />

			<!--右手-->
			<div id="right" class="_right-div">
				<span class="hand"></span>
			</div>

			<div class="task">
				<a href="javascript:void(0)" id="taskTime" data-state="close">开启自动播放</a>
			</div>
		</div>

	</body>

</html>

<script type="text/javascript">
	var _imageList = [];
	var hnd; //定时器对象
	var className="picShow";
	$(function() {

		var layerShow = new ImageShow();
		layerShow.getImageList();
		layerShow.clickBind();
	});

	//js插件 图片预览

	function ImageShow() {}

	ImageShow.prototype = {

		//绑定事件
		clickBind: function() {
			var $this = this;
			$("#imageShow").click(function() {
				$this.layerOpen();
			});

			$("."+className).each(function(i) {

				$(this).click(function() {
					if(_imageList != null && _imageList.length > 0) {
						$("#imagePreview").find("img").attr("src", _imageList[i]);
						$("#imagePreview").find("img").attr("data-index", i);
						$this.layerOpen();
					}

				});
			});

			$("#imagePreview #taskTime").click(function() {
				var state = $("#imagePreview #taskTime").attr("data-state");
				if(state == "close") {
					$("#imagePreview #taskTime").text("关闭自动播放");
					$("#imagePreview #taskTime").attr("data-state", "open");

					hnd = setInterval(function() {
						$this.myInterval();
					}, 1500); //1000为1秒钟
				} else if(state == "open") {
					$("#imagePreview #taskTime").text("开启自动播放");
					$("#imagePreview #taskTime").attr("data-state", "close");

					clearInterval(hnd);
				}
			});

			//左右手指切换图片
			$("#imagePreview #left").click(function() {
				var index = $("#imagePreview").find("img").attr("data-index");
				if(index > 0) {
					--index;
				} else if(index <= 0) {
					index = _imageList.length - 1;
				}
				$("#imagePreview").find("img").attr("src", _imageList[index]);
				$("#imagePreview").find("img").attr("data-index", index);
			});

			$("#imagePreview #right").click(function() {
				var index = $("#imagePreview").find("img").attr("data-index");
				if(index >= _imageList.length - 1) {
					index = 0;
				} else if(index < _imageList.length - 1) {
					index++;
				}
				$("#imagePreview").find("img").attr("src", _imageList[index]);
				$("#imagePreview").find("img").attr("data-index", index);
			});


			//悬浮到指定区域显示手指
			$("#imagePreview #left,#imagePreview #right").hover(function() {
				$(this).find('.hand').css("display", "block");
			}, function() {
				$(this).find('.hand').css("display", "none");
			})

		},

		//获取图片列表
		getImageList: function() {
			//var pic=document.getElementById("father").getElementsByTagName("img");
			var pic = document.getElementsByClassName(className);
			for(var i = 0; i < pic.length; i++) {
				_imageList.push(pic[i].getAttribute("src"));
			}
			var imgsrc = _imageList[0];
			$("#imagePreview").find("img").attr("src", _imageList[0]);
			$("#imagePreview").find("img").attr("data-index", 0);

		},

		//图片弹框
		layerOpen: function() {

			layer.open({
				type: 1,
				area: ['800px', '520px'],
				content: $("#imagePreview"),
				success: function(layero, index) {
					//			  hnd=setInterval("myInterval()",1500);//1000为1秒钟
				},
				end: function() {
					$("#imagePreview #taskTime").text("开启自动播放");
					$("#imagePreview #taskTime").attr("data-state", "close");
					clearInterval(hnd);
				}
			});

		},

		//task任务
		myInterval: function() {
			var index = $("#imagePreview").find("img").attr("data-index");
			if(index >= _imageList.length - 1) {
				index = 0;
			} else if(index < _imageList.length - 1) {
				index++;
			}
			$("#imagePreview").find("img").attr("src", _imageList[index]);
			$("#imagePreview").find("img").attr("data-index", index);

		}
	}
</script>